<template>
	<uni-popup ref="confirm" type="center" :maskClick="false" :show-close="showClose" v-show="visible" @change="visibleChange">
		<view class="cancel-popup" :class="popupClass">
			<view class="popup-title" v-if="title">{{title}}</view>
			<view class="popup-content">
				<slot>{{content}}</slot>
			</view>
			<view class="popup-footer" :class="{reverse:reverse}" v-if="showCancel||showConfirm">
				<view class="border-btn" @click="cancel" v-if="showCancel">{{cancelText}}</view>
				<view class="primary-btn" @click="confirm" v-if="showConfirm">{{confirmText}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name:'confirm-popup',
		components:{
			uniPopup
		},
		props:{
			visible:{
				type: Boolean,
				default:false
			},
			showCancel:{
				type: Boolean,
				default:true
			},
			content:{
				type:String,
				default:''
			},
			title:{
				type:String,
				default:''
			},
			cancelText:{
				type:String,
				default:'取消'
			},
			confirmText:{
				type:String,
				default:'确定'
			},
			showConfirm:{
				type: Boolean,
				default:true
			},
			reverse:{
				type: Boolean,
				default:false
			},
			showClose:{
				type: Boolean,
				default:false
			},
			popupClass:''
		},
		data() {
			return {
				
			}
		},
		watch:{
			'visible':function(val){
				if(val){
					this.$refs['confirm'].open()
				} else {
					this.$refs['confirm'].close()
				}
			}
		},
		methods:{
			cancel(){
				this.$emit('cancel')
				this.close()
			},
			confirm(){
				this.$emit('confirm')
				this.close()
			},
			close(){
				this.$emit('update:visible', false)
				this.$refs['confirm'].close()
			},
			visibleChange({show}){
				this.$emit('update:visible', show)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cancel-popup{
	width: 580rpx;
	padding: 50rpx;
	background-color: #fff;
	border-radius: 10rpx;
	.popup-title{
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		text-align: center;
	}
	.popup-content{
		font-size: 28rpx;
		text-align: center;
		&>view{
			text-align: left;
			margin-bottom: 20rpx;
		}
	}
	.popup-footer{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		&.reverse{
			flex-direction: row-reverse;
			.border-btn{
				margin-left: 40rpx;
				margin-right: 0;
			}
		}
	}
	.primary-btn,.border-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		flex:1;
		max-width: 220rpx;
		height:80rpx;
		font-size:30rpx;
		color:#fff;
		border-radius:10rpx;
		border:1px solid #E7404A;
		background-color: #E7404A;
	}
	.border-btn{
		border-color:#D8D8D8 ;
		background-color: #fff;
		color:#666;
		margin-right: 40rpx;
	}
}
</style>
